<template>
<div class="comment" style="margin-top:45px">
       <Vssue :title="$title" v-if='loginPlan' @hook:updated="SelectUpdated"/>
       <div style="color:rgb(23 105 180);font-weight: 600;cursor: pointer;text-align: center;" @click.stop='gologin' v-if='!loginPlan'>
            登录后评论
       </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
 export default {
    data () {
    return {
      loginPlan:null
    }
  },
  watch:{

    loginPlan(val, oldVal){
      this.domsAction(val, oldVal)
    }
    
 },
  mounted(){
    let login = this.handleLocalStorage( 'get' ,'Vssue.gitee.access_token');
    if(!login) { // 退出登录
       this.loginPlan = false
    }else{
    let access_token = Cookies.get('access_token')
    this.loginPlan = access_token
    if(access_token){ // 已登录
        this.handleLocalStorage( 'set' ,'loginPlan','1')
        this.loginPlan = true
    }else{ // 未登录
      this.handleLocalStorage( 'remove' ,'loginPlan');
      this.loginPlan = false ;
    }
    }
    
  },
  methods: {
    SelectUpdated(){
      console.log('组件的updated钩子函数被触发')
    },
    handleLocalStorage(method, key, value) {
            switch (method) {
              case 'get' : {
                let temp = window.localStorage.getItem(key);
                if (temp) {
                  return temp
                } else {
                  return false
                }
              }
              case 'set' : {
                window.localStorage.setItem(key, value);
                break
              }
              case 'remove': {
                window.localStorage.removeItem(key);
                break
              }
              default : {
                return false
              }
            }
    },
    gologin(){
       this.$router.push(`/comment/loginForcomment.html`);
    },
    logout(admin){
      console.log(admin)
    },
    domsAction(val, oldVal){
      let dom =  document.getElementsByClassName('nav-item')[-1];
      if(val){
        dom.style.display = 'none'
      }else{
        dom.style.display = 'inline-block'
      }
    }
  }
}
</script>
